<script setup lang="ts">
//  vue3中废弃了的.sync修饰符
// 在vue2中要使用.sync修饰符 步骤是
// 1. 父传子的时候 <Tom :属性.sync="值"></Tom>
// 2. 子组件正常接收
// 3. 子组件如果要修改父组件的数据, 发布的自定义事件名字是update:属性

// --------------
// 在vue3中废弃了 .sync修饰符 对应的解决方式
// 1. 父传子的时候 <Tom v-model:属性="值"></Tom>
// 2. 子组件正常接收
// 3. 子组件如果要修改父组件的数据, 发布的自定义事件名字是update:属性
import { ref } from 'vue';
import Tom from './Tom.vue'
const num = ref(88)
const changeNum = (val: number) => {
  num.value = val
}
</script>
<template>
  <div style="border: 2px solid #ccc; margin: 20px; padding: 20px">
    父组件
    <!-- <Tom :num="num" @change="changeNum"></Tom> -->
    <Tom v-model:num="num"></Tom>
  </div>
</template>
<style scoped>
</style>